<template>
    <div>
        <div class="banner-box">
            <div class="banner fl">
                <!-- <Swiper>
                    <Slide v-for="item in this.images" :key="item.index">
                        <img :src="'http://img.shanghaifoxie.com' + item.url" width="600" height="336" alt="">
                    </Slide>
                </Swiper> -->
                <!-- <slider :pages="pages" @tap="imgclick" :sliderinit="sliderinit"> -->
    <!-- slot  -->
  <!-- </slider> -->
  <swiper v-if="pages.length > 1" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in this.pages" :key="item.index" @click.native="swiperClick(item)">
      <img :src="item.style.background" width="100%" height="100%" alt="">
      <div class="tip">{{item.style.title}}</div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

            </div>
            <div class="main-ri fr">
                <div class="home-column">
                    <span class="fr" @click="shanghaifoxieClick()">更多 &gt;&gt;</span>
                    <el-tabs v-model="activeName1">
                        <el-tab-pane label="上海佛协" name="first">
                            <div class="main-ri-list1" style="height: 100%;">
                                <ul>
                                    <li v-for="(item, index) in this.shanghaifoxie" @click="gotodetails(item)" v-if='index<=3' :key="item.index">
                                        <h3 @click="gotodetails(item)">
                                            <span>{{item.title}}</span>
                                        </h3>
                                        <div class="con">{{item.remark.substr(0,50)}}
                                            <a @click="gotodetails(item)" class="more">[详情]</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
            </div>
        </div>
        <div class="main-box height" style="padding-bottom:30px">
            <div class="main-le fl">
                <div class="home-column tab1-type content">
                    <span class="fr" @click="gotonewcenter()">更多 &gt;&gt;</span>
                    <el-tabs v-model="activeName6" @tab-click="handleClick6">
                        <el-tab-pane label="沪佛动态" name="first">
                            <div class="main-list1 tab1-box show" style="display: block;">
                                <dl v-for="(item, index) in this.hufodongtai" @click="gotodetails(item)" v-if='index<=2' :key="item.index">
                                    <dt @click="gotodetails(item)">
                                        <span v-if="item.pic !== ''"><img :src="'http://img.shanghaifoxie.com' + item.pic" width="140" height="106" alt=""></span>
                                        <span v-if="item.pic === ''">暂无图片</span>
                                    </dt>
                                    <dd>
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark}}</div>
                                    </dd>
                                </dl>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="音频视频" name="second">
                            <div class="main-list1 tab1-box show" style="display: block;">
                                <!-- <dl v-for="item in this.gedifaxun" @click="gotodetails(item)" :key="item.index">
                                    <dt @click="gotodetails(item)">
                                        <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="140" height="106" alt=""></a>
                                    </dt>
                                    <dd>
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark}}</div>
                                    </dd>
                                </dl> -->
                                <div class="error">系统维护中。。。。。。</div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="放眼世界" name="third">
                            <div class="main-list1 tab1-box show" style="display: block;">
                                <dl v-for="(item, index) in this.fangyanshijie" @click="gotodetails(item)" v-if='index<=2' :key="item.index">
                                    <dt @click="gotodetails(item)">
                                        <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="140" height="106" alt=""></a>
                                    </dt>
                                    <dd>
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark}}</div>
                                    </dd>
                                </dl>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

            </div>
            <div class="main-ri fr">
                <div class="home-column tab2-type">
                    <span class="fr" @click="gotointroduce()">更多 &gt;&gt;</span>
                    <el-tabs v-model="activeName2" @tab-click="handleClick2">
                        <el-tab-pane label="现任会长" name="first">
                            <div v-for="item in this.xianrenhuizhang" :key="item.index" class="main-ri-fs tab2-box show">
                                <img class="fl fs-img" :src="'http://img.shanghaifoxie.com' + item.pic" @click="gotodetails(item)" width="160" height="172" alt="">
                                <p @click="gotodetails(item)">{{item.title}}</p>
                                <p @click="gotodetails(item)" v-html="item.remark"></p><br>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="历届会长" name="second">
                            <!-- <div v-for="(item, index) in this.lijielingdao" v-if='index<=0' :key="item.index" class="main-ri-fs tab2-box show">
                                <img class="fl fs-img" :src="'http://img.shanghaifoxie.com' + item.pic" @click="gotodetails(item)" width="160" height="172" alt="">
                                <p @click="gotodetails(item)">{{item.title}}</p>
                                <p @click="gotodetails(item)" v-html="item.remark"></p><br>
                            </div> -->
                            <div class="sm-list">
                                <dl v-for="(item, index) in this.lijielingdao" @click="gotodetails(item)" v-if='index<=2' :key="item.index">
                                    <dt @click="gotodetails(item)">
                                        <a style="line-height: 90px;text-align: center;display: block;" v-if="item.pic === ''">暂无图片</a>
                                        <a v-if="item.pic !== ''"><img :src="'http://img.shanghaifoxie.com' + item.pic" width="90" height="90" alt=""></a>
                                    </dt>
                                    <dd>
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark.substr(0,50)}}
                                            <a @click="gotodetails(item)" class="more">[详情]</a>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

            </div>
        </div>
        <div class="main-box">
            <div class="main-le fl">
                <div class="main-le1 fl">
                    <div class="home-column tab3-type">
                        <span class="fr" @click="gotopolicies()">更多 &gt;&gt;</span>
                        <el-tabs v-model="activeName3" @tab-click="handleClick3">
                            <el-tab-pane label="国家政策" name="first">
                                <div class="lists tab3-box show">
                                    <ul>
                                        <li v-for="(item, index) in guojiazhengci" @click="gotodetails(item)" v-if='index<=8' :key="item.index">
                                            <a @click="gotodetails(item)">{{item.title}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="佛教制度" name="second">
                                <div class="lists tab3-box show">
                                    <ul>
                                        <li v-for="(item, index) in fojiaozhidu" @click="gotodetails(item)" v-if='index<=8' :key="item.index">
                                            <a @click="gotodetails(item)">{{item.title}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="地方法规" name="third">
                                <div class="lists tab3-box show">
                                    <ul>
                                        <li v-for="(item, index) in difangfagui" @click="gotodetails(item)" v-if='index<=8' :key="item.index">
                                            <a @click="gotodetails(item)">{{item.title}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>

                </div>
                <div class="main-le2 fr">
                    <div class="home-column">
                        <span class="fr" @click="gotocharity()">更多 &gt;&gt;</span>
                        <el-tabs v-model="activeName4">
                            <el-tab-pane label="慈善公益" name="first">
                                <div class="lists">
                                    <ul>
                                        <li v-for="(item, index) in cishangongyi" @click="gotodetails(item)" v-if='index<=8' :key="item.index">
                                            <a @click="gotodetails(item)">{{item.title}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>

                </div>
            </div>
            <div class="main-ri fr">
                <div class="home-column">
                    <span class="fr" @click="gotoacquaintingPagoda()">更多 &gt;&gt;</span>
                    <el-tabs v-model="activeName5">
                        <el-tab-pane label="寺院场所" name="first">
                            <div class="sm-list">
                                <dl v-for="(item, index) in this.mingsibaosha" @click="gotodetails(item)" v-if='index<=2' :key="item.index">
                                    <dt @click="gotodetails(item)">
                                        <a style="line-height: 90px;text-align: center;display: block;" v-if="item.pic === ''">暂无图片</a>
                                        <a v-if="item.pic !== ''"><img :src="'http://img.shanghaifoxie.com' + item.pic" width="90" height="90" alt=""></a>
                                    </dt>
                                    <dd>
                                        <h3 @click="gotodetails(item)">
                                            <a>{{item.title}}</a>
                                        </h3>
                                        <div class="con">{{item.remark.substr(0,50)}}
                                            <a @click="gotodetails(item)" class="more">[详情]</a>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
// import { Swiper, Slide } from 'vue-swiper-component';
// import Swiper from 'vue-swiper';
// import slider from 'vue-concise-slider'; // 引入slider组件
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        notNextTick: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        loop: true,
        preventLinksPropagation: true,
        paginationClickable: true,
        mousewheelControl: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true // 修改swiper的父元素时，自动初始化swiper
      },
      pages: [],
      // 滑动配置[obj]
      sliderinit: {
        currentPage: 0, // 当前页码
        thresholdDistance: 100, // 滑动判定距离
        thresholdTime: 100, // 滑动判定时间
        autoplay: 3000, // 自动滚动[ms]
        loop: true, // 循环滚动
        direction: 'horizontal', // 方向设置，垂直滚动
        infinite: 1, // 无限滚动前后遍历数
        slidesToScroll: 1 // 每次滑动项数
      },
      activeName1: 'first',
      activeName2: 'first',
      activeName3: 'first',
      activeName4: 'first',
      activeName5: 'first',
      activeName6: 'first',
      request: {
        pageNo: '0',
        pageSize: '10',
        indexType: '1'
      },
      shanghaifoxie: [],
      hufodongtai: [],
      gedifaxun: [],
      fangyanshijie: [],
      xianrenhuizhang: [],
      lijielingdao: [],
      guojiazhengci: [],
      fojiaozhidu: [],
      difangfagui: [],
      cishangongyi: [],
      mingsibaosha: [],
      images: []
    };
  },
  created() {
    this.init();
    this.$parent.activeIndex2 = '1';
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // this.swiper.slideTo(3, 1000, false);
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/pageIndex`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            let imgs = response.data.data.image;
            for (let i = 0; i < imgs.length; i++) {
              this.pages.push({
                style: {
                  background: 'http://img.shanghaifoxie.com' + imgs[i].pic,
                  id: imgs[i].id,
                  title: imgs[i].title
                }
              });
            }
            let dataArr = response.data.data.list;
            let arr6 = [];
            let arr7 = [];
            let arr8 = [];
            for (let i = 0; i < dataArr.length; i++) {
              // console.log(dataArr[i]);
              if (dataArr[i].type === 17) {
                // 上海佛协
                this.shanghaifoxie = dataArr[i].data;
              }
              if (dataArr[i].type === 2) {
                // 沪佛动态
                this.hufodongtai = dataArr[i].data;
              }
              if (dataArr[i].type === 6) {
                // console.log(dataArr[i].data.slice(0, 2));
                // 各地法讯
                arr6 = dataArr[i].data.slice(0, 1);
              }
              if (dataArr[i].type === 7) {
                // console.log(dataArr[i].data.slice(0, 2));
                // 各地法讯
                arr7 = dataArr[i].data.slice(0, 1);
              }
              if (dataArr[i].type === 8) {
                // console.log(dataArr[i].data.slice(0, 2));
                // 各地法讯
                arr8 = dataArr[i].data.slice(0, 1);
              }
              if (dataArr[i].type === 9) {
                // 放眼世界
                this.fangyanshijie = dataArr[i].data;
              }
              if (dataArr[i].type === 19) {
                // 现任会长
                this.xianrenhuizhang = dataArr[i].data;
              }
              if (dataArr[i].type === 20) {
                // 历届会长
                this.lijielingdao = dataArr[i].data;
              }
              if (dataArr[i].type === 25) {
                // 国家政策
                this.guojiazhengci = dataArr[i].data;
              }
              if (dataArr[i].type === 26) {
                // 佛教制度
                this.fojiaozhidu = dataArr[i].data;
              }
              if (dataArr[i].type === 27) {
                // 地方法规
                this.difangfagui = dataArr[i].data;
              }
              if (dataArr[i].type === 34) {
                // 慈善公益
                this.cishangongyi = dataArr[i].data;
              }
              if (dataArr[i].type === 22) {
                // 名寺宝刹
                this.mingsibaosha = dataArr[i].data;
              }
            }
            let arrlist = arr6.concat(arr7);
            this.gedifaxun = arrlist.concat(arr8);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    swiperClick(item) {
      this.$router.push({
        path: `/details/${item.style.id}`
      });
    },
    imgclick(item) {
      this.$router.push({
        path: `/details/${this.pages[item.currentPage].style.id}`
      });
    },
    handleClick2(tab) {},
    handleClick3(tab) {},
    handleClick6(tab) {},
    gotonewcenter() {
      this.$router.push({ path: `/newsCenter` });
    },
    gotointroduce() {
      this.$router.push({
        path: `/introduce`
      });
    },
    gotopolicies() {
      this.$router.push({ path: `/policies` });
    },
    gotocharity() {
      this.$router.push({ path: `/charity` });
    },
    gotoacquaintingPagoda() {
      this.$router.push({ path: `/acquaintingPagoda` });
    },
    shanghaifoxieClick() {
      let type = 17;
      this.$router.push({ path: `/pageList/${type}` });
    },
    gotodetails(item) {
      this.$router.push({ path: `/details/${item.id}` });
    }
  },
  // components: {
  //   // Swiper
  //   slider
  // }
  components: {
    swiper,
    swiperSlide
  }
};
</script> 

<style lang="less">
.height {
  height: 400px !important;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
.banner-box {
  padding: 20px 0;
  height: auto;
  overflow: hidden;
  .banner {
    height: 400px;
    width: 600px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
  }
  .main-ri {
    width: 380px;
    .main-ri-list1 {
      height: 284px;
      padding-top: 6px;
      overflow: hidden;
      li {
        list-style: none;
        padding: 12px 0;
        h3 {
          height: 28px;
          line-height: 28px;
          padding-bottom: 4px;
          overflow: hidden;
          font-size: 18px;
          color: #000;
          font-weight: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .con {
          height: 36px;
          line-height: 18px;
          overflow: hidden;
          .more {
            color: #e8ac3a;
          }
        }
      }
    }
  }
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 30px;
  .main-le {
    width: 600px;
    //*****************************************//
    .lists {
      padding-top: 8px;
      li {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        position: relative;
        padding-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        &::before {
          position: absolute;
          left: 0;
          top: 18px;
          content: '';
          width: 4px;
          height: 4px;
          background-color: #dd9b1e;
        }
      }
    }
    .main-le1 {
      width: 320px;
    }
    .main-le2 {
      width: 260px;
    }
  }
  .main-list1 {
    height: 362px;
    padding-top: 10px;
    .error{
      line-height: 362px;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }
    dl {
      height: 106px;
      margin: 6px 0;
      width: 100%;
      display: block;
      float: left;
      dt {
        float: left;
        width: 140px;
      }
      dd {
        float: right;
        width: 448px;
        h3 {
          font-size: 18px;
          font-weight: normal;
          color: #000;
          height: 28px;
          line-height: 28px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .con {
          height: 54px;
          line-height: 18px;
          overflow: hidden;
          padding-top: 8px;
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .main-ri-fs {
      //   height: 345px;
      padding-top: 20px;
      overflow: hidden;
      line-height: 18px;
      .fs-img {
        margin: 0 12px 8px 0;
      }
    }
    //************************************//
    .sm-list {
      padding-top: 6px;
      dl {
        width: 100%;
        float: left;
        margin: 10px 0;
        dt {
          width: 90px;
          height: 90px;
          float: left;
        }
        dd {
          width: 278px;
          line-height: 18px;
          padding-left: 12px;
          float: right;
          height: auto;
          overflow: hidden;
          h3 {
            font-size: 16px;
            font-weight: normal;
            line-height: 32px;
          }
          .con {
            line-height: 18px;
            height: 54px;
            overflow: hidden;
          }
          .more {
            color: #e8ac3a;
          }
        }
      }
    }
  }
}
</style>